/**
 * 目标1：默认显示-北京市天气
 *  1.1 获取北京市天气数据
 *  1.2 数据展示到页面
 */
function getWeatcher(code) {
  myAxios({
    url: 'http://hmajax.itheima.net/api/weather',
    params: {
      city: code
    }
  }).then(({ data }) => {
    console.log(data);
    const { area, dateShort, dateLunar, dayForecast, temperature, psPm25, psPm25Level, todayWeather } = data
    // 分为四块
    // 渲染城市名称
    document.querySelector('.area').innerHTML = area
    // 渲染当前时间
    document.querySelector('.dateShort').innerHTML = dateShort
    document.querySelector('.dateLunar').innerHTML = dateLunar
    // 渲染当前城市的天气情况
    document.querySelector('.temperature').innerHTML = temperature
    // weather
    const { temNight, temDay, weather, weatherImg, windDirection, windPower } = dayForecast[0]
    document.querySelector('.range').innerHTML = `
                    <span class="weather">${weather}</span>
                    <span class="temNight">${temNight}</span>
                    <span>-</span>
                    <span class="temDay">${temDay}</span>
                    <span>℃</span>
        `
    document.querySelector('.weather-list').innerHTML = `
        <li>
            <img src=${weatherImg} class="weatherImg" alt="">
            <span class="weather">多云</span>
          </li>
          <li class="windDirection">${windDirection}</li>
          <li class="windPower">${windPower}</li>
        `
    document.querySelector('.air').innerHTML = `
        <span class="psPm25">${psPm25}</span>
          <span class="psPm25Level">${psPm25Level}</span>
        `

    // 渲染当前城市近七天的天气情况
    const ul = document.querySelector('.week-wrap')
    const lis = dayForecast.map(({ date, dateFormat, weatherImg, weather, temDay, temNight, windDirection, windPower }) => {
      // { date, dateFormat, temDay, temNight, weather, weatherImg, windDirection, windPower }
      return `
            <li class="item">
          <div class="date-box">
            <span class="dateFormat">${dateFormat}</span>
            <span class="date">${date}</span>
          </div>
          <img src="${weatherImg}" alt="" class="weatherImg">
          <span class="weather">${weather}</span>
          <div class="temp">
            <span class="temDay">${temDay}</span>-
            <span class="temNight">${temNight}</span>
            <span>℃</span>
          </div>
          <div class="wind">
            <span class="windDirection">${windDirection}</span>
            <span class="windPower">${windPower}</span>
          </div>
        </li>
            `
    })
    ul.innerHTML = lis.join('')
  }).catch(err => { console.log(err); })

}
// 默认显示北京市天气预报
getWeatcher('110100')


// 用于输入太高用防抖
function debeonce(cd, time = 300) {
  let timer
  return function () {
    clearTimeout(timer)
    timer = setTimeout(() => {
      cd.call(this)
    }, time)
  }
}


/**
 * 目标2：搜索城市列表
 *  2.1 绑定input事件，获取关键字
 *  2.2 获取展示城市列表数据
 */
const search = document.querySelector('.search-city')

search.addEventListener('input', debeonce(function () {
  // 搜索建议  看是否有对应的答案
  myAxios({
    url: 'http://hmajax.itheima.net/api/weather/city',
    params: {
      city: search.value
    }
  }).then(res => {
    const data = res.data
    const lis = data.map(({ name, code }) => `<li data-code=${code} class="city-item">${name}</li> `).join('')
    document.querySelector('.search-list').innerHTML = lis
  })
}))

/**
 * 目标3：切换城市天气
 *  3.1 绑定城市点击事件，获取城市code值
 *  3.2 调用获取并展示天气的函数
 */

const list = document.querySelector('.search-list')
list.addEventListener('click', (e) => {
  console.log(e.target.dataset.code);
  const code = e.target.dataset.code
  search.value = e.target.innerHTML
  myAxios({
    url: "http://hmajax.itheima.net/api/weather",
    params: {
      city: code
    }
  }).then(res => {
    getWeatcher(code)
  })

})

